
<template>
  <div id="order" :class='{"isiphone":$isiphone}'>
    <div class="top">
      <tab :line-width="1" custom-bar-width="29px" v-model="index" active-color='#EC1B24'>
        <tab-item class="vux-center" :selected="defaultTab === item" v-for="(item, index2) in tabList" @click="defaultTab = item" :key="index2">{{item}}</tab-item>
      </tab>
        <div class="vux-swiper-wrap">
          <div class="tab-swiper vux-center">
            <div class="one" v-for="(item, index2) in waitO" :key='index2+"x"' @click='JumpItem(item)' v-if="index == 0">
              <img :src="item.img" alt="">
              <div class="detail">
                <p>{{item.name}}</p>
                <div>x{{item.number}}</div>
                <span>{{"￥"+item.money}}</span>
                <span>
                  待付款
                </span>
              </div>
            </div>
            <div class="one" v-for="(item, index2) in finishO" :key='index2' @click='JumpItem(item)' v-if="index == 1">
              <img :src="item.img" alt="">
              <div class="detail">
                <p>{{item.name}}</p>
                <div>x{{item.number}}</div>
                <span>{{"￥"+item.money}}</span>
                <span>{{item.isRefund?'已退款':'已完成'}}</span>
              </div>
            </div>
            <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
          </div>
        </div>
    </div>
    <div  @click="scrollTopBtn" class="top-icon">
      <img src="../../../wechat/static/images/top.png" alt="">
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem,LoadMore } from "vux";
import { setTimeout } from 'timers';
export default {
  name: "order",
  data() {
    return {
      index: 0,
      defaultTab: "待付款",
      tabList: ["待付款", "已完成"],
      waitO: [],
      finishO: [
      ],
      isloading:false
    };
  },
  mounted() {
    this.getList()
  },
  watch:{

  },
  created() {
    this.index = parseInt(this.$route.query.type)
    if(this.index == 1){
      this.defaultTab = '已完成'
    }
  },
  methods: {
    scrollTopBtn(){
      document.body.scrollTop=document.documentElement.scrollTop=0
    },
    getList() {
      let url =
        this.$CONSTANT.ORDER.findEsPayOrderByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        pageIndex: 1,
        pageSize: 1000,
        isPay: '',
        userId:localStorage.getItem('userId')||''
      };
      // this.$vux.loading.show({
      //   text: 'Loading'
      // })
      this.isloading = false
      this.$common.post(url, param, res => {
        this.isloading = true
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            if(element.status == 'wait'){
              this.waitO.push({
                name: element.esPayOrderDetailDTO[0].goodsName,
                img: element.esPayOrderDetailDTO[0].photos[0].fileUrl,
                money: element.totalPrice,
                number: element.esPayOrderDetailDTO[0].nums,
                id: element.id,
                isRefund:element.isRefund
              })
            }else if(element.status == 'pay'&&element.orderType == 'real') {
              this.finishO.push({
                name: element.esPayOrderDetailDTO[0].goodsName,
                img: element.esPayOrderDetailDTO[0].photos.length>0?element.esPayOrderDetailDTO[0].photos[0].fileUrl:'',
                money: element.totalPrice,
                number: element.esPayOrderDetailDTO[0].nums,
                id: element.id,
                isRefund:element.isRefund
              })
            }
          });
          console.log(this.waitO,'ee',this.finishO)
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
      return
      let param2 = {
        pageIndex: 1,
        pageSize: 1000,
        userId: this.userId,
        isPay: 'n',
        userId:localStorage.getItem('userId')||''
      };
      // this.$vux.loading.show({
      //   text: 'Loading'status
      // })
      this.isloading = false
      this.$common.post(url, param2, res => {
        this.isloading = true
        this.$vux.loading.hide()
        if (res.status == 200) {
          var bussData = res.data.bussData;
          bussData.forEach(element => {
            this.waitO.push({
              name: element.esPayOrderDetailDTO[0].goodsName,
              img: element.esPayOrderDetailDTO[0].photos[0].fileUrl,
              money: element.totalPrice,
              id: element.esPayOrderDetailDTO[0].id
            })
          });
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    onItemClick(index) {
      console.log("on item click:", index);
    },
    JumpItem(item) {
      this.$router.push({path: '/orderD', query: {id: item.id}})
    },
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    LoadMore
  }
};
</script>

<style lang="less">
#order {
  height: 100%;
  .top {
    height: 100%;
    .vux-tab-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: .88rem;
      padding-top: 0;
      z-index: 999;
      .vux-tab-container {
        .vux-tab {
          .vux-tab-item {
            font-family: PingFang-SC-Medium;
            color: #999;
            font-size: 15px;
            background: none;
          }
          .vux-tab-selected {
            color: #333 !important;
          }
          .vux-tab-ink-bar {
            height: 2px !important;
          }
        }
      }
    }
   .vux-swiper-wrap {
        // height: 100% !important;
        // overflow-y: scroll;
        padding-top: .88rem;
        .tab-swiper {
          // padding-top: 10px;
          padding-bottom: 10px;
          .one {
            background: #fff;
            margin-top: 8px;
            padding: 22px 11px;
            position: relative;
            img {
              position: absolute;
              top: 22px;
              left: 11px;
              display: inline-block;
              width: 26.6%;
              height: 94px;
              border: 1px solid transparent;
              border-radius: 3px;
              margin-right: 15px;
              object-fit: contain;
            }
            .detail {
              display: inline-block;
              width: 65.1%;
              vertical-align: top;
              position: relative;
              height: 96px;
              margin-left: 33%;
              div{
                color: #999;
                margin: 12px 0 20px;
                font-size: 12px;
                font-family: PingFang-SC-Medium;
              }
              p {
                color: #333;
                font-size: 13px;
                font-family: PingFang-SC-Medium;
              }
              span {
                margin-top: 41px;
                color: #ea030b;
          font-size: 14px;
                font-family: PingFang-SC-Bold;font-weight: 600;
                position: absolute;
                bottom: 0;
                left: 0;
                &:last-child{
                  right: 0;
          font-size: 12px;
                  left: auto;
                  color: #EC1B24;
                }
              }
            }
          }
          .surplus{
            .item{
              .left{
                p{
                  span{
                    color: #B5B5B5;
                  }
                  &:last-child {
                    color: #B5B5B5;
                  }
                }
                .range {
                  color: #FFFFFF;
                  background: #DBDBDB;
                }
              }
              .right{
                span{
                  color: #B5B5B5;
                }
              }
            }
          }
          a{
            margin-top: 170px;
            margin-left: 73px;
            margin-bottom: 41px;
            text-align: center;
            display: inline-block;
            width: 229px;
            height: 45px;
            line-height: 45px;
            border: 1px solid transparent;
            border-radius: 23px;
            background-color: #f02931;
            font-family: PingFang-SC-Bold;font-weight: 600;
            font-size: 15px;
            color: #fff;
            text-align: center;
            &:hover {
              background-color: #e1252c;
            }
          }
        }
      }
  }
}
</style>
